<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>基本使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <schools></schools>
        <student></student>
    </div>

    <div id="root2">
        <student></student>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    // 1. 创建组件
    const school = Vue.extend({
        template:
            `
            <div>
                <h1>template 测试</h1>
                <h2>{{schoolName}}</h2>
            </div>
            `,
        data() {
            return {
                schoolName: '尚硅谷',
            }
        }
    })
    //第一步：创建student组件
    const student = Vue.extend({
        template: `
				<div>
					<h2>学生姓名：{{studentName}}</h2>
					<h2>学生年龄：{{age}}</h2>
				</div>
			`,
        data() {
            return {
                studentName: '张三',
                age: 18
            }
        }
    })
    // 注册全局组件之后才可以创建vm，不然不显示
    Vue.component('student', student)

    // 注册组件
    new Vue({
        el: '#root',
        components: {
            schools: school
        }
    })
    // 全局注册
    new Vue({
        el: '#root2'
    })

</script>

</html>